<template>
	<div class="resourcesPictures">
		<el-card shadow="hover">
			<div class="resources-ictures mb15">
				<el-form :inline="true" :model="formData" label-width="90px" class="demo-form-inline">
					<el-row>
						<el-col :span="7">
							<el-form-item label="关键词:" style="width: 100%">
								<el-input maxlength="200" v-model="formData.keyWord" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="上传时间" style="width: 100%">
								<el-date-picker style="width: 100%" value-format="YYYY-MM-DD" v-model="formData.time" type="date" placeholder="选择日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<div style="padding-left: 10px">
								<el-button type="primary" @click="searchFun">搜索</el-button>
								<el-button @click="resetFrom">重置</el-button>
							</div>
						</el-col>
						<el-col :span="3">
							<div style="padding-left: 10px; text-align: right">
								<el-button type="success" @click="setDialogVisible(true)">新增</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
				<el-table v-loading="loading" :data="tableData" style="width: 100%">
					<el-table-column prop="orderNumber" width="80px" label="序号"> </el-table-column>
					<el-table-column width="100px" label="图片">
						<template #default="scope">
							<img width="60" :src="scope.row.imgUrl" alt="" />
							<!-- <el-image
								lazy
								style="width: 100px; height: 100px"
								fit="cover"
								:z-index="9999"
								:src="scope.row.imgUrl"
								:preview-src-list="srcList"
								:initial-index="scope.$index"
							>
							</el-image>
                             -->
						</template>
					</el-table-column>
					<el-table-column prop="name" label="图片名称"> </el-table-column>
					<el-table-column label="上传时间">
						<template #default="scope">
							{{ returnDateText(scope.row.uploadDate) }}
						</template>
					</el-table-column>
					<el-table-column width="400px" label="图片链接">
						<template #default="scope">
							<div class="uri-box">
								{{ scope.row.imgUrl }}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="编辑" width="80px">
						<template #default="scope">
							<el-button text :loading="deleteLoading" type="danger" @click="beforeDelete(scope.row)">禁用</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="page.current"
					background
					v-model:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="page.total"
				>
				</el-pagination>
			</div>
		</el-card>
		<el-dialog v-model="dialogVisible" title="上传图片" width="50%" :destroy-on-close="true">
			<PictureUpload />
			<template #footer>
				<span class="dialog-footer">
					<el-button :loading="dialogLoading" type="primary" @click="uploadImgs">关闭并重载列表</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="ResourcesPictures">
import 'dayjs/locale/zh-cn';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useResourceApi } from '/@/api/resource';
import PictureUpload from '/@/components/pictureSelector/PictureUpload.vue';
import { timeFormat } from '/@/utils/filters';

const { delPicById, getPicList } = useResourceApi();

let loading = ref(false);
let dialogVisible = ref(false);
let dialogLoading = ref(false);
let deleteLoading = ref(false);

let formData = ref({
	keyWord: '',
	time: null,
});

let tableData = ref([]);

let srcList = ref([]);

let page = ref({
	pageSize: 10,
	current: 1,
	total: 0,
});

init();

function init() {
	getList();
}

function searchFun() {
	if (loading.value) {
		return;
	}
	page.value = {
		pageSize: page.value.pageSize,
		current: 1,
		total: page.value.total,
	};
	getList();
}

async function getList() {
	if (loading.value) {
		return;
	}
	loading.value = true;

	try {
		let params = {
			current: page.value.current,
			pageSize: page.value.pageSize,
			picName: formData.value.keyWord,
			status: 1, // 如果是null，表示查所有，是否展示 0->禁用；1->启用
			createTime: formData.value.time,
			// type:"jpg" // 图片类型
		};
		let res = await getPicList(params);
		if (res.code !== 200) {
			loading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		loading.value = false;
		page.value = {
			pageSize: res.data.pageSize,
			current: res.data.current,
			total: res.data.total,
		};

		let tempList = res.data.data.map((item, index) => {
			return {
				isChecked: false,
				id: item.id,
				orderNumber: (res.data.current - 1) * 10 + index + 1,
				name: item.picName,
				uploadDate: item.createTime,
				imgUrl: item.picUrl,
			};
		});

		tableData.value = tempList;

		setSrcList(tempList);
	} catch (error) {
		loading.value = false;
		ElMessage({
			type: 'error',
			message: '获取图片列表失败',
		});
	}
}

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	getList();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	getList();
};

function setSrcList(list) {
	srcList.value = list.map((item) => {
		return item.imgUrl ? item.imgUrl : '';
	});
}

async function deleteFun(id, state) {
	// console.log(id);
	if (deleteLoading.value) {
		return;
	}
	deleteLoading.value = true;
	let params = {
		idList: [id],
		status: state == 0 ? 1 : 0, // 是否展示 0->禁用；1->启用
	};
	try {
		let res = await delPicById(params);
		if (res.code !== 200) {
			deleteLoading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		ElMessage({
			type: 'success',
			message: '禁用成功！',
		});
		deleteLoading.value = false;
		getList();
	} catch (error) {
		deleteLoading.value = false;
	}
}

function resetFrom() {
	formData.value = {
		keyWord: '',
		time: null,
	};
	// page.value = {
	//     pageSize: page.value.pageSize,
	//     current: 1,
	//     total: page.value.total,
	// };
	// getList();
}

function beforeDelete(row) {
	ElMessageBox.confirm(`确认禁用图片：${row.name}?`, '禁用图片', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			deleteFun(row.id, row.type);
		})
		.catch(() => {});
}

function setDialogVisible(state) {
	dialogVisible.value = state;
}

function uploadImgs() {
	dialogVisible.value = false;
	getList();
}

function returnDateText(params) {
	let returnText = '';
	if (!params) {
		returnText = '';
	} else {
		let paramsDate = timeFormat(params);
		returnText = `${paramsDate}`;
	}
	return returnText;
}
</script>
<style lang="scss" scoped></style>
